<template>
  <div ww3 auto>
    <div class="title-msg" row-center fz-14>
      搜索到<span class="red">18000</span>个与<span class="red">{{keywords}}</span>相符的作品（最多展示100页）
      <div class="about-search">
        相关搜索：
        <span>国庆片头</span>
        <span>中秋国庆</span>
      </div>
    </div>
    <select-nav></select-nav>
    <div class="query-content">
      <div class="left">
        <div class="sort-list">
          <span class="title">价格/</span>
          <span>全部</span>
          <span>20￥以下</span>
          <span>20-50￥</span>
          <span>大于50￥</span>
        </div>
        <div class="sort-list">
          <span class="title">分辨率/</span>
          <span>全部</span>
          <span>sd标清</span>
          <span>hd高清</span>
          <span>2k</span>
          <span>4k/6k</span>
        </div>
        <div class="sort-list">
          <el-radio-group v-model="radio">
            <el-radio :label="3">透明通道</el-radio>
            <el-radio :label="6">无限循环</el-radio>
            <el-radio :label="9">肖像权</el-radio>
          </el-radio-group>
        </div>
        <div class="sort-list">
          <span class="title">时长/</span>
          <span>全部</span>
          <span>60秒以下</span>
          <span>1-2分钟</span>
          <span>2分钟以上</span>
        </div>
        <div class="sort-list">
          <span class="title">帧率/</span>
          <span>全部</span>
          <span>23.98</span>
          <span>24</span>
          <span>25</span>
          <span>29.97</span>
          <span>30</span>
          <span>50</span>
          <span>59.94</span>
          <span>60</span>
        </div>
        <div class="sort-list">
          <el-radio-group v-model="radio2">
            <el-radio :label="3">个人供稿</el-radio>
            <el-radio :label="6">企业供稿</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="rigih">
        <el-dropdown>
          <span class="sort-box">
            排序<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>默认排序</el-dropdown-item>
            <el-dropdown-item>最多下载</el-dropdown-item>
            <el-dropdown-item>最新上传</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="result-content">
      <div class="result-item" v-for="(item, index) in 40" :key="index"
       @mouseenter="itemEnter" @mouseleave="itemLeave">
        <div class="res-i-img">
          <img :src="imgHead" alt="">
        </div>
        <div class="res-i-img">
          <img :src="imgBottom" alt="">
        </div>
        <div class="item-msg">
          <span class="down">1000下载</span>
          <span class="time">00:24</span>
        </div>
        <video class="item-mediu" id="itemVideo" v-show="showVideo" :src="imgVideo"></video>
      </div>
    </div>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import SelectNav from './components/SelectNav.vue'
export default {
  components: {
    SelectNav
  },
  data() {
    return {
      keywords: '',
      radio: 3,
      radio2: 3,
      imgHead: 'https://pic.vjshi.com/2021-06-15/9e32b8bb560f9839d691fc98d12a23d2/online/99df205dbc926fc3b2894cb668cb097d.jpg?x-oss-process=style/resize_w_285',
      imgBottom: 'https://pic.vjshi.com/2021-06-15/9e32b8bb560f9839d691fc98d12a23d2/online/079271b6c945d80af65a2e096941d897.jpg?x-oss-process=style/resize_w_285_crop_h_428',
      imgVideo: 'https://lmp4.vjshi.com/2021-05-31/23ba8feb401862150cde627c15bf03ab.mp4?v=nizhuanrennizhuan',
      showVideo: false,
      itemVideo: null
    }
  },
  mounted() {
    console.log("搜索参数", this.$route.params.key);
    this.keywords = this.$route.params.key;
    this.itemVideo = this.$video('itemVideo', {
      controls: false,
      muted: true,
      autoplay: false,
      width: '285px',
      height: '160px'
    })
  },
  methods: {
    itemEnter() {
      // console.log("enter")
      // this.showVideo = true;
      // 鼠标进入某一项，对其对应的短视频进行播放
      // this.itemVideo.play()
    },
    itemLeave() {
      // console.log('leave')
      // this.showVideo = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-radio {
  margin-right: 12px;
}
.title-msg{
  margin-bottom: 20px;
}
.title-msg span {
  color: var(--color-black);
}
.about-search span {
  margin: 0 10px;
}
.about-search span:first-child {
  margin-left: 0;
}
.title-msg .red{
  color: #fd0000;
}
.sort-box{
  padding: 4px 10px;
  border: 1px solid #afaeae;
}
.query-content{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.left{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.sort-list{
  font-size: var(--content);
  color: var(--color-black);
  width: 33%;
  margin-top: 20px;
}
.sort-list .title{
  color: #555;
  margin: 20px 0px;
  cursor: initial;
}
.sort-list span {
  margin: 20px 6px;
  cursor: pointer;
}
/* 视频列表部分 */
.result-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  cursor: pointer;
  margin-top: 16px;
}
.result-content .result-item{
  width: 285px;
  height: 320px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 14px;
  position: relative;
}
.result-content .result-item .res-i-img{
  width: 285px;
  height: 160px;
  overflow: hidden;
}
.result-item .res-i-img img {
  width: 100%;
  vertical-align: middle;
}
.result-item .item-msg{
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 285px;
  box-sizing: border-box;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--small);
  color: #f4f3f3;
}
.item-mediu{
  position: absolute;
  top: 0;
  left: 0;
  width: 285px;
}
</style>
